<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../react18/react.development.js"></script>
    <script src="../../react18/react-dom.development.js"></script>
    <script src="../../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      // 封装函数调用替代虚拟DOM对象

      /*
                  不定义组件，使用函数返回值包裹虚拟DOM的弊端
                      识别性不高，一般组件的调用是用首字母大写标签 函数需要调用
                      不具备组件拥有的功能（生命周期，状态等）
                      开发者工具不识别
              */
      function header() {
        const time = "2023/3/23";
        return (
          <div>
            <h1>我是h1</h1>
            <p>现在时间是{time}</p>
          </div>
        );
      }

      const root = ReactDOM.createRoot(document.querySelector("#app"));
      //   root.render(<header></header>);
      /*
              函数式组件
                  *函数定义的组件被称作函数式组件，组件名 首字母必须大写，函数式组件内部必须返回一个虚拟DOM
                  *直接以标签的形式使用组件，单双标签都可
                  *当函数式组件被使用时
                      根据当前标签名，找到对应的组件
                      调用当前定义组件函数
                      拿到返回的虚拟DOM
            */
      function Dev() {
        return <div>这里是Dev组件</div>;
      }
      function Header() {
        const time = "2023/3/23";
        return (
          <div>
            <h1>我是h1</h1>
            <p>现在时间是{time}</p>
            <Dev />
          </div>
        );
      }
      /* 
        组件嵌套
      */
      root.render(<Header></Header>);
    </script>
  </body>
</html>
